<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>查询界面</title>
<!--    引入 Bootstrap 在线样式-->
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<style>
    a {
        color: #fff;
    }

    th {
        text-align: center;
    }
</style>
<body>
<button class="btn btn-primary form-control" style="height:50px"><a th:href="@{'/patient/insertPage'}">添加用户</a>
</button>
请输入查询Id：<input id="ajaxInput" type="text">
<button  class="btn btn-primary" id="ajaxButton" value="查询">使用原生Ajax进行查询</button>
<button  class="btn btn-primary" id="ajaxButtonByJQuery" value="查询">使用JQuery Ajax进行查询</button><br>
<table class="table table-striped table-bordered table-hover text-center">
    <thead>
    <tr style="text-align:center">
        <th>编号</th>
        <th>用户id</th>
        <th>姓名</th>
        <th>证件类型</th>
        <th>证件编号</th>
        <th>性别</th>
        <th>出生年月</th>
        <th>手机</th>
        <th>是否结婚</th>
        <th>省code</th>
        <th>市code</th>
        <th>区code</th>
        <th>详情地址</th>
        <th>联系人姓名</th>
        <th>联系人证件类型</th>
        <th>联系人证件号</th>
        <th>联系人手机</th>
        <th>就诊卡号</th>
        <th>是否有医保</th>
        <th>状态（0：默认 1：已认证）</th>
        <th>创建时间</th>
        <th>更新时间</th>
        <th>逻辑删除(1:已删除，0:未删除)</th>
        <th>操作</th>
    </tr>
    </thead>
    <tr th:each="patients: ${patients}">
        <td th:text="${patients.id}"></td>
        <td th:text="${patients.userid}"></td>
        <td th:text="${patients.name}"></td>
        <td th:text="${patients.certificatesType}"></td>
        <td th:text="${patients.certificatesNo}"></td>
        <td th:text="${patients.sex}==0?'女':'男'"></td>
        <!--        <td th:text="${patients.birthdate}"></td>-->
        <td th:text="${#dates.format(patients.birthdate, 'yyyy-MM-dd')}"></td>
        <td th:text="${patients.phone}"></td>
        <td th:text="${patients.isMarry}==0?'未婚':'已婚'"></td>
        <td th:text="${patients.provinceCode}"></td>
        <td th:text="${patients.cityCode}"></td>
        <td th:text="${patients.districtCode}"></td>
        <td th:text="${patients.address}"></td>
        <td th:text="${patients.contactsName}"></td>
        <td th:text="${patients.contactsCertificatesType}"></td>
        <td th:text="${patients.contactsCertificatesNo}"></td>
        <td th:text="${patients.contactsPhone}"></td>
        <td th:text="${patients.cardNo}"></td>
        <td th:text="${patients.isInsure}==0?'否':'是'"></td>
        <td th:text="${patients.status}"></td>
        <!--        <td th:text="${patients.createTime}"></td>-->
        <!--        <td th:text="${patients.updateTime}"></td>-->
        <td th:text="${#dates.format(patients.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        <td th:text="${#dates.format(patients.updateTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        <td th:text="${patients.isDeleted}"></td>
        <td>
            <a class="btn btn-primary" th:href="@{'/patient/updatePage/'+${patients.id}}">更改</a>
            <a class="btn btn-danger" th:href="@{'/patient/delete/'+${patients.id}}">删除</a>
        </td>
    </tr>

</table>
<!--显示分页信息-->
<div class="modal-footer no-margin-top">
    <div class="col-md-6">
        当前第 [[${pageInfo.pageNum}]]页,共 [[${pageInfo.pages}]] 页.一共 [[${pageInfo.total}]] 条记录
    </div>

    <ul class="pagination pull-right no-margin">
        <li th:if="${pageInfo.hasPreviousPage}">
            <a th:href="'/patient/select?pageNum=1'">首页</a>
        </li>

        <li class="prev" th:if="${pageInfo.hasPreviousPage}">
            <a th:href="'/patient/select?pageNum='+${pageInfo.prePage}">上一页
                <i class="ace-icon fa fa-angle-double-left"></i>
            </a>
        </li>
        <!--遍历条数-->
        <li th:each="nav:${pageInfo.navigatepageNums}">
            <a th:href="'/patient/select?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
            <span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}"
                  th:text="${nav}"></span>
        </li>

        <li class="next" th:if="${pageInfo.hasNextPage}">
            <a th:href="'/patient/select?pageNum='+${pageInfo.nextPage}">下一页
                <i class="ace-icon fa fa-angle-double-right"></i>
            </a>
        </li>

        <li>
            <a th:href="'/patient/select?pageNum='+${pageInfo.pages}">尾页</a>
        </li>
    </ul>
</div>

<!--<div>当前页号：<span th:text="${pageInfo.pageNum}"></span></div>-->
<!--<div>每页条数：<span th:text="${pageInfo.pageSize}"></span></div>-->
<!--<div>起始行号：<span th:text="${pageInfo.startRow}"></span></div>-->
<!--<div>终止行号：<span th:text="${pageInfo.endRow}"></span></div>-->
<!--<div>总结果数：<span th:text="${pageInfo.total}"></span></div>-->
<!--<div>总页数：<span th:text="${pageInfo.pages}"></span></div>-->
<!--<hr/>-->
<!--<div>是否为第一页：<span th:text="${pageInfo.isFirstPage}"></span></div>-->
<!--<div>是否为最后一页：<span th:text="${pageInfo.isLastPage}"></span></div>-->
<!--<div>是否有前一页：<span th:text="${pageInfo.hasPreviousPage}"></span></div>-->
<!--<div>是否有下一页：<span th:text="${pageInfo.hasNextPage}"></span></div>-->
</body>
<!--引入 JQuery 在线样式-->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>

    //原生ajax 通过id查询
    let httpRequest = new XMLHttpRequest();
    document.getElementById("ajaxButton").onclick = () => {
        const id = document.getElementById("ajaxInput").value;
        makeRequest("selectOne", id);
    };

    function makeRequest(url, id) {
        httpRequest.onreadystatechange = alertContents;
        httpRequest.open("POST", url);
        httpRequest.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded"
        );
        // console.log(id);
        // httpRequest.send(`userName=${encodeURIComponent(userName)}`);
        httpRequest.send(`id=${encodeURIComponent(id)}`);
    }
    function alertContents() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                const response = JSON.parse(httpRequest.responseText);
                // alert(response.computedString);
                console.log(response)
            } else {
                alert("请求出现了问题。");
            }
        }
    }
    //使用JQuery Ajax进行查询
    document.getElementById("ajaxButtonByJQuery").onclick = () => {
        const id = document.getElementById("ajaxInput").value;
        $.ajax({
            url: "selectOne",
            type: "POST",
            data: {
                id: id
            },
            success: function (res) {
                console.log(res);
            }
        });
    };


</script>
</html>